<template>
  <!-- 主要内容区域 -->
  <div class="main-content">
    <el-row :gutter="16" v-loading="loading" element-loading-text="加载中...">
      <el-col
        v-for="section in hotDate.filteredNewsSections"
        :key="section.id"
        :span="24 / columnsCount"
      >
        <news-section
          :title="section.name"
          v-model:subtitle="section.dateTime"
          v-model:news-items="section.data"
          :hot-name="section.name"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref,reactive,onMounted } from 'vue'
import {errorMsg} from "../../../utils/message";
import NewsSection from "./NewsSection"
import {getHotToDayList} from "../../../api/rank/hot"

// 设置每行显示的列数（1-4）
const columnsCount = ref(3)
// 热点信息
const hotDate = reactive({
  filteredNewsSections: []
})
// 加载
const loading = ref(true)

// 加载热点信息
const hotToDayList = ()=>{
  getHotToDayList().then(res => {
    loading.value = false
    if (res.code == 200){
      hotDate.filteredNewsSections = res.data
    } else {
      errorMsg(res.message)
    }
  })
}

onMounted(()=>{
    hotToDayList();
})
</script>
<style scoped>

</style>